<template>
  <span class="number">
    <template v-for="(item, i) in arr">
      <span class="comma" v-if="(type === '1' && showSpan(i, arr.length))" :key="i">,</span>
      <span :key="i">
        <svg-icon class="icon" :icon-class="`font2-${item}`" ></svg-icon>
      </span>
    </template>
  </span>
</template>
<script>
export default {
  props: {
    val: {
      type: String | Number,
      default: ''
    },
    type: String
  },
  methods: {
    showSpan(i, len) {
      if (len <= 3) return false
      if (len <= 6) return this.arr.length - 3 === i
      let n = (Math.ceil(len / 3) - 2)
      let arr = []
      if (len % 3 === 0) {
        n += 1
      } else {
        arr.push(len % 3)
      }
      for (let i = 0; i < n; i++) {
        arr.push((i + 1) * 3)
      }
      return arr.some(a => a === i)
    }
  },
  computed: {
    arr() {
      return String(this.val).split('')
    }
  }
}
</script>
<style lang="less" scoped>
.number{
  font-size: 0;
  span{
    display: inline-block;
    vertical-align: bottom;
  }
  .icon{
    font-size: 17px;
  }
  .comma{
    font-size: 17px;
  }
}
</style>
